<template>
	<div class="index">
		<el-row :gutter="30">
			<el-col class="index-head" :span="24">
				<el-col :lg="18" :xl="20">
					<div class="index-head-left">学员报名缴费</div>
					<div class="quick-entrance">
						<ul>
							<li class="quick-entrance-item">快捷入口：</li>
							<li class="quick-entrance-item">
								<router-link to="/income/simulationfee">模拟</router-link>
							</li>
							<li class="quick-entrance-item">
								<router-link to="/income/contractfee">包库</router-link>
							</li>
							<li class="quick-entrance-item">
								<router-link to="/income/extrafee">加时</router-link>
							</li>
						</ul>
					</div>
				</el-col>
			</el-col>
		</el-row>
		<el-row :gutter="30">
			<el-col :lg="18" :xl="20" class="my-artcle">
				<div class="student-select">
					<p class="student-select-title">学员查询</p>
					<el-input placeholder="输入学员证件号码..." v-model="search" class="input-with-select">
						<el-button slot="append" icon="el-icon-search" @click="searchStu">查询</el-button>
					</el-input>
				</div>
				<div class="pay-method">
					<el-tabs tabPosition="left" v-model="payType">
						<el-tab-pane name="1" :disabled="tabDisabled[0]">
							<span slot="label"><i class="el-icon-date pay-method-icon"></i> 全额付款</span>
							<tab-one :employees="employees" :stuData="stuData" @confirm="confirm"></tab-one>
						</el-tab-pane>
						<el-tab-pane name="2" :disabled="tabDisabled[1]">
							<span slot="label"><i class="el-icon-date pay-method-icon"></i> 分期付款</span>
							<tab-two :employees="employees" :stuData="stuData" @confirm="confirm"></tab-two>
						</el-tab-pane>
						<el-tab-pane name="4" :disabled="tabDisabled[3]">
							<span slot="label"><i class="el-icon-date pay-method-icon"></i> 包库学员</span>
							<tab-three :teachers="teachers" :stuData="stuData" @confirm="confirm"></tab-three>
						</el-tab-pane>
						<el-tab-pane name="3" :disabled="tabDisabled[2]">
							<span slot="label"><i class="el-icon-date pay-method-icon"></i> 先学后付</span>
							<tab-four></tab-four>
						</el-tab-pane>
					</el-tabs>
				</div>
			</el-col>
			<el-col :lg="6" :xl="4">
				<student-info :stuData="stuData"></student-info>
			</el-col>
		</el-row>
		<!-- 报名信息确认 -->
		<confirm v-model="confirmShow" :confirmData="confirmData"></confirm>
	</div>
</template>

<script>
	import tabOne from "@/components/stupayment/tab-one"
	import tabTwo from "@/components/stupayment/tab-two"
	import tabThree from "@/components/stupayment/tab-three"
	import tabFour from "@/components/stupayment/tab-four"
	import studentInfo from "@/components/student-info";
	import confirm from "@/components/stupayment/submit-confirm";
	export default {
		name: "stupayment",
		components: {
			tabOne,
			tabTwo,
			tabThree,
			tabFour,
			studentInfo,
			confirm
		},
		mounted: function() {
			// 员工业务员
			this.$http.get('iem/allEmployee', (d) => {
				if(d.resultCode == 0) {
					this.employees = d.record;
				}
			});
			// 员工教练员
			this.$http.get('iem/allTeacher', (d) => {
				if(d.resultCode == 0) {
					this.teachers = d.record;
				}
			});
		},
		data() {
			return {
				search: '',
				stuData: {},
				payType: '1',
				employees: [],
				teachers: [],
				confirmShow: false, //报名信息确认
				confirmData: null,
				tabDisabled: [false, false, false, false]
			};
		},
		methods: {
			// 报名查询
			searchStu() {
				if(this.search != '') {
					this.$http.get('iem/stupayment/' + this.search, {
						_t: Math.random()
					}, (n) => {
						if(n.status == '1') {
							if(n.data.obj) { //有报名信息
								this.$http.get(process.env.JXH_API_HOST + 'api/student/' + this.search, {
									_t: Math.random()
								}, (d) => {
									if(d.resultCode == 0) {
										$.extend(d.record, n.data.obj);
										this.stuData = d.record;
										this.payType = d.record.payType;
										this.tabDisabled = this.tabDisabled.map((e,i)=>{
											return i == (this.payType-1)? false: true;
										});
										if(d.record.payType == '2') { //组合分期科目限制
											let insList = this.stuData.instalmentList;
											let _tmp = [];
											insList.forEach((e) => {
												let _sub = e.subject.split(",");
												_tmp.push.apply(_tmp, _sub);
											});
											_tmp.sort();
											let subList = [];
											_tmp.forEach((e) => {
												if(subList.indexOf(e) == -1) {
													subList.push(e);
												}
											});
											this.stuData.subject = subList;
											if(this.stuData.instalment - 1 == insList.length) {
												let amountTotle = 0;
												insList.forEach((e) => {
													amountTotle = amountTotle + e.amount;
												});
												this.stuData.amount = Number(this.stuData.totalAmount) - Number(amountTotle);
											}
										}
									} else {
										layer.msg(d.msg, {
											shift: 6,
											shade: 0.3
										});
										this.stuData = {};
										this.tabDisabled = [false, false, false, false];
									}
								});
							} else { //未报过名
								this.$http.get(process.env.JXH_API_HOST + 'api/studentPre/' + this.search, {
									_t: Math.random()
								}, (d) => {
									if(d.resultCode == 0) {
										this.stuData = d.record;
										this.tabDisabled = [false, false, false, false];
									} else {
										layer.msg(d.msg, {
											shift: 6,
											shade: 0.3
										});
										this.stuData = {};
										this.tabDisabled = [false, false, false, false];
									}
								});
							}
						} else {
							layer.msg(n.msg, {
								shift: 6,
								shade: 0.3
							});
						}
					});
				}
			},
			// 报名信息确认
			confirm(data) {
				if(this.stuData.studentId) {
					this.confirmData = $.extend(true, {
						payType: this.payType
					}, this.stuData, data);
					if (this.confirmData.payType == '2' && this.confirmData.instalmentNo != 1) {
						let _subject = this.confirmData.subject.filter(e=>{
							return this.stuData.subject.indexOf(e) == -1;
						});
						this.confirmData.subject = _subject;
					}
					
					this.confirmShow = true;
				} else {
					layer.msg('请先查询学员信息！', {
						shift: 6,
						shade: 0.3
					});
				}
			}
		}
	};
</script>

<style scoped>

</style>